<template>
  <view class="viewpot">
    <wd-navbar
      fixed
      placeholder
      custom-style="background-color: rgba(232, 255, 242, 1);"
      safeAreaInsetTop
      :bordered="false"
    >
      <template #left>
        <wd-icon
          custom-style="background-color: #fff ;border-radius: 14rpx;margin-left: 20rpx;"
          name="home"
          size="30"
        />
      </template>
    </wd-navbar>
    <view class="section">
      <view class="section-top">
        <view class="section-top-left">
          <image src="@/static/prod/detail3.png" mode="scaleToFill" class="section-image" />
        </view>
        <view class="section-top-center">
          <view class="top-center-title">认证的你</view>
          <view class="top-center-titleMin">
            {{ isAuth ? '已认证身份' : '未认证身份' }}
          </view>
        </view>
        <view class="section-top-right">
          <!-- 去认证按钮 -->
          <view class="top-right-image" v-if="!isAuth" @click="handleAuth">
            <text>去认证</text>
          </view>

          <!-- 已认证盒子 -->
          <view class="top-right-ren" v-else>
            <image src="@/static/my/yiren.png" mode="scaleToFill" class="ren-imge" />
            <text class="ren-text">已认证</text>
          </view>
        </view>
      </view>
      <view class="section-content">
        <view class="content-top">
          <view class="content-top-left">我的订单</view>
          <view class="content-top-right" @click="onOrder">
            <text>全部</text>
            <view class="info-right"> <wd-icon name="arrow-right" size="16px"></wd-icon> </view>
          </view>
        </view>
        <view class="form-content">
          <view class="rating-box" @click="onOrderTab('待付款')">
            <image src="@/static/my/from1.png" class="rating-title" />
            <text class="rating-score">待支付</text>
          </view>
          <view class="rating-box" @click="onOrderTab('待发货')">
            <image src="@/static/my/from4.png" class="rating-title" />
            <text class="rating-score">待发货</text>
          </view>
          <view class="rating-box" @click="onOrderTab('待收货')">
            <image src="@/static/my/from3.png" class="rating-title" />
            <text class="rating-score">待收货</text>
          </view>
          <view class="rating-box">
            <image src="@/static/my/from4.png" class="rating-title" />
            <text class="rating-score">退款/售后</text>
          </view>
        </view>
      </view>
      <view class="share-box">
        <view class="share-box-manger">
          <text class="share-title">分享小程序给好友优惠券</text>
          <!-- <view class="share-form">立即分享</view> -->
          <button class="share-form" open-type="share">立即分享</button>
        </view>
      </view>
      <view class="info">
        <view class="info-box">
          <view class="info-list" @click="onAddress">
            <view class="info-left">
              <image src="@/static/my/setting.png" class="info-image" mode="scaleToFill" />
              <text>基本设置</text>
            </view>
            <view class="info-right">
              <wd-icon name="arrow-right" size="18px"></wd-icon>
            </view>
          </view>
          <view class="info-list">
            <view class="info-left">
              <image src="@/static/my/youhui.png" class="info-image" mode="scaleToFill" />
              <text>优惠券</text>
            </view>
            <view class="info-right"> <wd-icon name="arrow-right" size="18px"></wd-icon> </view>
          </view>
          <view class="info-list">
            <view class="info-left">
              <image src="@/static/my/kefu.png" class="info-image" mode="scaleToFill" />
              <text>联系客服</text>
            </view>
            <view class="info-right"> <wd-icon name="arrow-right" size="18px"></wd-icon> </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { onShareAppMessage } from '@dcloudio/uni-app'

  import { ref } from 'vue'

  const isAuth = ref(false) // 是否认证

  // 页面中定义分享
  onShareAppMessage((res) => {
    // res.from 可以区分是右上角菜单还是 button 触发
    console.log('分享来源:', res.from)
    return {
      title: '送你一张优惠券 🎁',
      path: '/pages/my/index', // 分享后打开的页面路径
      imageUrl: '/static/icon/my.png',
    }
  })

  // 点击去认证
  const handleAuth = () => {
    isAuth.value = true
  }
  const onAddress = () => {
    console.log('sss')
    uni.navigateTo({
      url: '/pagesMember/address/address',
    })
  }
  const onOrder = () => {
    uni.navigateTo({
      url: '/pages/order/index',
    })
  }
  const onOrderTab = (tabName: string) => {
    console.log('跳转过去')
    uni.navigateTo({
      url: `/pages/order/index?tab=${encodeURIComponent(tabName)}`,
    })
  }
</script>
<style lang="scss">
  page {
    background-color: rgba(250, 250, 250, 1);
  }
  @import './index.scss';
</style>
